
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>注册 </title>
    <link rel="stylesheet" type="text/css" href="../css/register-login.css">
</head>
<body>
<div id="box"></div>
<div class="cent-box register-box">
    <div class="cent-box-header">
        <h1 class="main-title ">虚拟现实质量评估网站</h1>
        <h2 class="sub-title">从专业的角度，选最好的VR</h2>
    </div>

    <div class="cont-main clearfix">
        <div class="index-tab">
            <div class="index-slide-nav">
                <a href="login.html">登录</a>
                <a href="register.html" class="active">注册</a>
                <div class="slide-bar slide-bar1"></div>
            </div>
        </div>

        <div class="login form">
            <div class="group">
                <div class="group-ipt email">
                    <input type="email" name="email" id="email" class="ipt" placeholder="邮箱地址" required>
                </div>
                <div class="group-ipt user">
                    <input type="text" name="user" id="user" class="ipt" placeholder="用户名" required>
                </div>
                <div class="group-ipt password">
                    <input type="password" name="password" id="password" class="ipt" placeholder="设置登录密码" required>
                </div>
                <div class="group-ipt password1">
                    <input type="password" name="password1" id="password1" class="ipt" placeholder="重复密码" required>
                </div>
                <div class="group-ipt verify">
                    <input type="text" name="verify" id="verify" class="ipt" placeholder="输入验证码" required>
                    <canvas id="imgcode"></canvas>
                </div>
            </div>
        </div>

        <div class="button">
            <button type="submit" class="login-btn register-btn" id="button" onclick="test()">注册</button>
        </div>
    </div>
</div>

<div class="footer">
    <!--<p>千寻 - Thousands Find</p>-->
    <!--<p>Designed By ZengRong & <a href="zrong.me">zrong.me</a> 2016</p>-->
</div>

<script src='../js/jquery.min.js' type="text/javascript"></script>
<script>
    $(".login-btn").click(function(){
        var email = $("#email").val();
        var password = $("#password").val();
        var verify = $("#verify").val();
        // $.ajax({
        // url: 'http://www.zrong.me/home/index/userLogin',
        // type: 'post',
        // jsonp: 'jsonpcallback',
        //       jsonpCallback: "flightHandler",
        // async: false,
        // data: {
        // 	'email':email,
        // 	'password':password,
        // 	'verify':verify
        // },
        // success: function(data){
        // 	info = data.status;
        // 	layer.msg(info);
        // }
        // })

    })
    $("#remember-me").click(function(){
        var n = document.getElementById("remember-me").checked;
        if(n){
            $(".zt").show();
        }else{
            $(".zt").hide();
        }
    })
function randomNum(min,max){//生成随机数
    return Math.floor(Math.random()*(max-min)+min);
}
function randomColor(min,max){//生成随机颜色
    var r = randomNum(min,max);
    var g = randomNum(min,max);
    var b = randomNum(min,max);
    return "rgb("+r+","+g+","+b+")";
}
var verification;
verification = drawPic();//返回验证码值
document.getElementById("imgcode").onclick = function(){//点击图片更换验证码
    verification = drawPic();//返回验证码值
}
function drawPic() {
    var canvas = document.getElementById("imgcode");
    var width = canvas.width;
    var height = canvas.height;
    var ctx = canvas.getContext("2d");//构建一张2维图
    ctx.baseline = 'bottom';
    //设置背景颜色
    ctx.fillStyle = randomColor(180, 240);
    ctx.fillRect(0, 0, width, height);//绘制矩形
    //设置字体
    var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789";
    var result = "";
    for (var i = 0; i < 4; i++) {
        var txt = str[randomNum(0, str.length)];
        ctx.fillStyle = randomColor(50, 160);//填充颜色
        ctx.font = randomNum(80, 110) + "px SimHei";
        var x = 20 + i * 70;
        var y = randomNum(75,90);
        var deg = randomNum(-45, 45);
        //修改字体旋转角度
        ctx.translate(x, y);
        ctx.rotate(deg * Math.PI / 180);
        ctx.fillText(txt, 0, 0);//填充文本
        //恢复字体旋转角度
        ctx.rotate(-deg * Math.PI / 180);
        ctx.translate(-x, -y);
        result += txt;
    }
    return result;
}
function test(){
    var inputRandom=document.getElementById("verify").value.toLowerCase();
    if(inputRandom==verification.toLowerCase()) {
        alert("通过验证");
    } else  {
        alert("验证码不正确");
    }

}
</script>
</body>
</html>